<!--
 * @Author: QMZhao
 * @Description: 登录
 * @Date: 2023-01-07 11:24:06
 * @LastEditTime: 2023-01-28 17:55:39
 * @Reference: 
-->
<script lang="ts" setup>
import { ref } from "vue";

import { Ilogin } from "@/model/view/login";

// 登录表单
const loginForm = ref<Ilogin>({
	userName: "admin",
	password: "123456"
});

/**
 * 登录调用
 */
function onLogin() {
	uni.switchTab({
		url: `/pages/index/index`
	});
}
</script>

<template>
	<view class="w_100 vh100 login-container">
		<view class="login-form-content login-form-position">
			<view class="login-form-title">
				<text>登录</text>
			</view>
			<view class="login-form-item">
				<text class="lfi-label">用户名</text>
				<u-input
					border="surround"
					placeholder="请输入帐号"
					v-model.trim="loginForm.userName"
				></u-input>
			</view>
			<view class="login-form-item">
				<text class="lfi-label">密码</text>
				<u-input
					border="surround"
					placeholder="请输入密码"
					v-model.trim="loginForm.password"
				></u-input>
			</view>
			<view class="login-form-item login-form-btn w_100 h_100">
				<view class="btn-box " @tap="onLogin">
					<text>登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
.login-container {
	background-color: $bg-content;
	position: relative;
	.login-form-content {
		width: 80%;
		height: auto;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		background-color: $color-white;
		box-shadow: 0 4rpx 16rpx 0 #0000001a;
		.login-form-title {
			font-size: 40rpx;
			color: #000;
			font-weight: 500;
			margin-bottom: 40rpx;
		}
		.login-form-item {
			margin-bottom: 40rpx;
			.lfi-label {
				display: inline-block;
				font-size: 32rpx;
				color: #333;
				height: 60rpx;
				line-height: 1;
			}
		}
		.login-form-btn {
			height: 80rpx;
			.btn-box {
				border-radius: 10rpx;
				background-color: #1890ff;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}
	.login-form-position {
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%, -50%);
	}
}
</style>
